import QtQuick 2.2
import QtQuick.Controls 1.1
import "qrc:///styles/"

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("QML Singleton Sample 1")
    menuBar: menu

    MenuBar {
        id: menu

        Menu {
            title: qsTr("File")

            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit()
            }
        }
    }
    GridView {
        anchors.fill: parent
        model: 1000
        cellHeight: 50
        cellWidth: cellHeight

        // 在这两个delegate之间切换以查看之间的差异
        // MyStyleObject（每个delegate创建它自己的对象实例）和
        // MySingletonStyleObject（每个delegate使用相同的实例）。
        //        delegate: gridDelegateUsingAnInstanceStyleObject
        delegate: gridDelegateUsingASingletonStyleObject
    }
    Component {
        id: gridDelegateUsingAnInstanceStyleObject

        Rectangle {
            width: 50
            height: width
            color: myStyle.colourBlue
            border.color: myStyle.colourRed
            border.width: myStyle.borderSize

            Text {
                anchors.centerIn: parent
                text: index
                font.pointSize: myStyle.fontPointSize
                color: myStyle.colourWhite
            }
            MyStyleObject {
                id: myStyle //<-- 注意这里，当您使用myStyle时，他指向一个实例对象
            }
        }
    }
    Component {
        id: gridDelegateUsingASingletonStyleObject

        Rectangle {
            width: 50
            height: width
            color: MyStyle.colourBlue //<-- 注意当使用MyStyle（大写字母M）时，您指的是qml目录文件中定义的单例。
            border.color: MyStyle.colourRed
            border.width: MyStyle.borderSize

            Text {
                anchors.centerIn: parent
                text: index
                font.pointSize: MyStyle.fontPointSize
                color: MyStyle.colourWhite
            }
        }
    }
}
